<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"
         session="false"%>
<%@ include file="/WEB-INF/jspf/import.jspf"%>
<%@page import="cn.pconline.autoclub.config.SystemConfig"%>
<!doctype HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
        <title>车友会同城</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="author" content="xieyongshuang_gz zhongqingbiao_gz" />
        <link rel="stylesheet" type="text/css" href="http://js.3conline.com/wap/pcauto/2014/touch/club/club.css">
    </head>
    <body class="g-doc" id="J-main">
        <!--栏目计数器/文章计数器-->
         <jsp:include page="/template/wap/common/counter.jspf">
            <jsp:param name="channel" value="7839" />
        </jsp:include>
        <%@include file="../common/intf6007.html" %>
        <!-- 公共头部 -->
        <div class="g-hd">
            <a href="${WAPROOT}" class="header-home" title="太平洋汽车网"></a>
            <div class="header-title">
                <span class="header-title-nav">
                    <a href="${WAPROOT}/">车友会</a> &gt; 同城
                </span> 
                <a class="cur-city" href="javascript:void(0);" id="J-cur-city"></a>
            </div>

        </div>
        <div class="g-th" id="mClubTab">
            同城车友会 <a class="g-th-more" href="${WAPROOT }/city">更多></a>
        </div>
        <div class="m-club-list" id="mClubList"></div>
        <div class="g-th" id="mPromotionTab">
            同城优惠 <a class="g-th-more" href="${WAPROOT }/tongcheng/youhui">更多></a>
        </div>
        <!--车友会S-->
        <div id="sliderCyh" class="m-tccylist slider-cyh">
            <div class="slider-cyh-wrap J_slideWrap" id="mPromotionList"></div>
            <div class="m-cyh-tab J_slideNav" id="sliderCyh-doc"></div>
        </div>
        <!--车友会E-->
        <div class="g-th" id="createDyna">同城动态
            <a href="" class="g-th-add" id="Jadd"></a>
        </div>
        <div class="m-news-list" id="mDynaDiv">
            <div class="m-news-item-none" id="localDynaNone"
                 style="display: none;">
                亲，您所在的城市还没有<br>车友发过动态呢！
            </div>
        </div>
        <div class="g-btn-more" onclick="loadMore();" id="loadMore"></div>
        <input id="provinceIdHide" type="hidden" />
        <input id="cityIdHide" type="hidden" />
        <!--隐藏评论输入框-->
        <div class="comment" id="comment_pop">
            <!-- 评论输入 -->
            <div class="c-input">
                <div class="c-top">
                    <div class="c-face">
                        <span class="c-face-btn"></span><span class="c-face-list"></span>
                    </div>
                </div>
                <div class="c-area">
                    <textarea id="content_pop" placeholder="评论"></textarea>
                </div>
                <div class="c-btn">
                    <span class="c-submit" id="cmtSubmit_pop" onclick="replyDyna(this);">发表</span>
                </div>
            </div>
        </div>

        <div id="Jfoot" class="g-footer">
            <!-- 公共底部 -->
            <%@include file="../common/intf5987.html" %>
        </div>
        <script type="text/javascript"
        src="http://js.3conline.com/wap/2013/common/js/zepto1.1.min.js"></script>
        <script type="text/javascript"
        src="http://js.3conline.com/wap/common/swipe.extend-min.js"></script>
        <script type="text/javascript"
        src="http://js.3conline.com/wap/common/Location-min.js"></script>

        <script type="text/javascript">
            //设置创建动态链接 
            function setCreateDynaButton() {
                var proCode = $("#provinceIdHide").val();
                var cityCode = $("#cityIdHide").val();
                var isMember = "${isMember}";
                if (isMember == "true") {//是车友会成员
                    $("#Jadd").attr("href", "${WAPROOT}/${myUrl}/postDyna/" + proCode + "/" + cityCode + "/");
                    $("#Jadd").show();
                } else if (${user.uid > 0}) {//不是车友会成员，但是已经登录
                    $("#Jadd").attr("href", "${WAPROOT}/postDyna/" + proCode + "/" + cityCode + "/");
                    $("#Jadd").show();
                } else {//没有登录
                    $("#Jadd").hide();
                }
            }
	      	
            //同城动态
            var pageNo = 1, loadFlag = true;
            function loadMore(proCode, cityCode) {
                $("#loadMore").html("加载中...");
                var proCode = $("#provinceIdHide").val();
                var cityCode = $("#cityIdHide").val();
                $.getJSON("${ROOT}/dyna/listLocalDynaWap.do?req_enc=utf-8&resp_enc=utf-8&callback=?",{
                    provinceId : proCode,
                    cityId : cityCode,
                    pageNo : pageNo,
                    pageSize : 10
                }, loadCallback);
            }
            function loadCallback(data) {
                if (loadFlag) {
                    if (data.data.length) {
                        if (data.code == 0) {
                            var result = data.data, len = result.length, html = "", mDynaDiv = $("#mDynaDiv");

                            if (len == 0) {
                                $("#localDynaNone").show();
                            } else {
                                for (var i = 0; i < len; i++) {
                                    var dyna = result[i];
                                    cmtNum = dyna.postCount,
                                    cmt = "";
                                    if(cmtNum > 0){
                                        cmt = '<a href="'+dyna.desUrl+'" class="m-news-reply repost" >'+cmtNum+'</a>';
                                    }else{
                                        cmt = '<a href="javascript:void(0);" class="m-news-reply repost" >'+cmtNum+'</a>';
                                    }
								
                                    html += '<div class="m-news-item">'
                                        + '<div class="m-news-face">'
                                        + '<a href="${UCWAPROOT}/' + dyna.authorId + '/">'
                                        + '<img src="' + dyna.authorPhoto + '" width="50" height="50"></a></div>'
                                        + '<div class="m-news-user">'
                                        + '<a href="${UCWAPROOT}/' + dyna.authorId + '/">'
                                        + dyna.nickname + '</a></div>'
                                        + '<div class="m-news-tit">'
                                        + '<a href="' + dyna.desUrl+ '/">'
                                        + dyna.content + '</a></div>'
                                        + '<div class="m-news-pics clf">';

                                    var picList = dyna.piclist, picsLen = picList.length;
                                    //九宫格图
                                    if(picsLen > 0 && picsLen <= 9){
                                        if(picsLen == 1){
                                            for (var j = 0; j < picsLen; j++) {
                                                if (picList[j].smaPic != '' && picList[j].smaPic.length > 0) {
                                                    html += '<a class="m-news-pic"><img src="' + picList[j].smaPic + '" width="'+picList[j].width+'" height="'+picList[j].height+'" data-meta="'+picList[j].bigPic+'"/></a> ';
                                                }
                                            }
                                        } else if(picsLen == 4){
                                            for (var j = 0; j < picsLen; j++) {
                                                if (picList[j].smaPic != '' && picList[j].smaPic.length > 0) {
                                                    html += '<a class="m-news-pic"><img src="' + picList[j].smaPic + '" width="75" height="75" data-meta="'+picList[j].bigPic+'"/></a> ';
                                                }
                                                if(j == 1) {
                                                    html += '</br>';
                                                }
                                            }
                                        } else {
                                            for (var j = 0; j < picsLen; j++) {
                                                if (picList[j].smaPic != '' && picList[j].smaPic.length > 0) {
                                                    html += '<a class="m-news-pic"><img src="' + picList[j].smaPic + '" width="75" height="75" data-meta="'+picList[j].bigPic+'"/></a> ';
                                                }
                                            }
                                        }
                                    }
                                    html += '</div>'
                                        + '<div class="m-news-info">'
                                        + dyna.postTime
                                        + cmt + '</div>'
                                        + '<input type="hidden" name="dynaInfoId" value="'+dyna.dynaInfoId+'"/>' 
                                        + '<input type="hidden" name="replyId" value="0"/>'
                                        + '<input type="hidden" name="createDate" value="'+dyna.pubTimeYmd+'"/>'
                                        + '<input type="hidden" name="type" value="' + dyna.type + '"/></div>';
                                }
                                mDynaDiv.append(html);
                            }

                            if (data.pageCount > pageNo) {
                                $("#loadMore").html(
                                "<a href='javascript:void(0)'>点击加载更多 </a>");
                            } else {
                                $("#loadMore").html("没有更多数据了...");
                                $("#loadMore").removeAttr("onclick");
                                loadFlag = false;
                            }
                            pageNo++;
                        }

                    } else {
                        $("#loadMore").html("没有更多数据了...");
                        $("#loadMore").removeAttr("onclick");
                        loadFlag = false;
                    }
                }
            }
        </script>
        <script type="text/javascript">
            // 初始化定位
            Location.init(function(location) {
                // 操作 location
                document.getElementById('J-cur-city').innerHTML = location.city.replace("市", "");
                loadClubPromotion(location.proCode, location.cityCode);// 获取省市ID
                $("#provinceIdHide").val(location.proCode);
                $("#cityIdHide").val(location.cityCode);
                loadMore(location.proCode, location.cityCode);
                setCreateDynaButton();//初始化创建动态图标

            });
            // 同城优惠动态效果
            function promotionFlas() {
                window.mySwipe = swipe(document.getElementById('sliderCyh'), {
                    speed : 400,
                    auto : 3000,
                    nav : document.getElementById('sliderCyh-doc'),/*空元素，会自动生成导航*/
                    continuous : true,
                    disableScroll : false,
                    stopPropagation : false,
                    callback : function(index, elem) {
                    },
                    transitionStart : function(index, elem) {
                    },
                    transitionEnd : function(index, elem) {
                    }
                });
            }

            //加载同城车友会、同城优惠信息
            function loadClubPromotion(proCode, cityCode) {
                var url = "${ROOT}/club/listLocalClubAndPromotions.do?provinceId="
                    + proCode + "&cityId=" + cityCode;
                $
                .ajax({
                    type : "get",
                    dataType : "jsonp",
                    url : url,
                    success : function(data) {
                        if (data.code == 0) {
                            //同城车友会
                            var clubList = data.sameCityClubData, clubCount = clubList.length;
                            if (clubCount == 0) {//隐藏同城动态标题
                                hideClubDiv();
                            } else {
                                var clubHtml = "";
                                var clubDiv = $("#mClubList");
                                for (var i = 0; i < clubCount; i++) {
                                    var curData = clubList[i];
                                    clubHtml += '<a href="${WAPROOT}/' + curData.clubUrl + '/">'
                                        + '<img src="' + curData.logo + '" width="80" height="60">'
                                        + '<p>'
                                        + curData.name
                                        + '</p>'
                                        + '</a>';
                                }
                                clubDiv.append(clubHtml);
                            }

                            //同城优惠
                            var promotionList = data.preferentialData, promotionCount = promotionList.length;
                            if (promotionCount >= 3) {//最多显示3条
                                promotionCount = 3;
                            }
                            if (promotionCount == 0) {//隐藏同城优惠标题
                                hidePromotionDiv();
                            } else {
                                var promotionHtml = "";
                                var promotionDiv = $("#mPromotionList");
                                for (var j = 0; j < promotionCount; j++) {
                                    var promotionData = promotionList[j];
                                    promotionHtml += '<a class="m-tccylist-item" href="' + promotionData.topicUrl + '">'
                                        + '<img src="' + promotionData.img +'" width="85" height="65">'
                                        + '<p>'
                                        + promotionData.title
                                        + '</p>' + '</a>';

                                }
                                promotionDiv.append(promotionHtml);
                                if (promotionCount > 1) {//有同城优惠数据时候，才触发动态图效果
                                    promotionFlas();
                                }
                            }
                        } else {
                            //获取数据异常
                            hideClubDiv();
                            hidePromotionDiv();
                        }
                    },
                    error : function() {
                        //无法成功获取数据
                        hideClubDiv();
                        hidePromotionDiv();
                    }
                });
            };

            //没有同城车友会时，隐藏同城车友会的所有DIV 
            function hideClubDiv() {
                $("#mClubTab").hide();
                $("#mClubList").hide();
            }

            //没有同城优惠时，隐藏同城优惠的所有DIV
            function hidePromotionDiv() {
                $("#sliderCyh").hide();
                $("#mPromotionTab").hide();
                $("#mPromotionList").hide();
                $("#sliderCyh-doc").hide();
            }
        </script>
        <script>
            // 点击查看大图
            $(document).delegate(
            '.m-news-pics img',
            'click',
            function(e) {
                var picArray = [], index, col = $(this).closest(
                '.m-news-pics').find('img');
                col.each(function() {
                    picArray.push($(this).attr('data-meta'));
                });
                index = col.index(this);
                makeSwipe(picArray, index);
            });

            function makeSwipe(ary, idx) {
                var HTML = '', div, fullPicSlider, sliderEle, _windowHeight = document.documentElement.clientHeight, _scrollTop = document.body.scrollTop;

                idx = idx || 0;
                ary.forEach(function(item, idx) {
                    HTML += '<div><img src2="{url}"></div>'.replace('{url}', item);
                });
                HTML = '<div id="fullPicSlider"><div class="picwrap">' + HTML
                    + '</div><div id="slidenum">123/123</div></div>';
                div = document.createElement('div');
                document.body.appendChild(div);
                div.outerHTML = HTML;
                sliderEle = document.getElementById('fullPicSlider');
                sliderEle.addEventListener("touchmove", function(e) {
                    if (e.touches.length > 1) {
                        e.preventDefault();
                    }
                }, false);
                fullPicSlider = swipe(sliderEle, {
                    startSlide : idx,
                    callback : render,
                    disableScroll : true
                });
                sliderEle.style.top = _scrollTop + 'px';
                sliderEle.onclick = delSwipe;

                window.addEventListener('orientationchange', function() {
                    sliderEle.style.top = document.body.scrollTop + 'px';
                }, false);

                window.addEventListener('scroll', function() {
                    sliderEle.style.top = document.body.scrollTop + 'px';
                }, false);

                function render(index, elem) {
                    var total = ary.length;
                    document.getElementById('slidenum').innerHTML = (index * 1 + 1)
                        + '/' + total;

                    //elem.parentNode.style.height = (elem.clientHeight||elem.offsetHeight) + "px";
                }

                function delSwipe() {
                    var dom = document.getElementById('fullPicSlider');
                    fullPicSlider.kill();
                    dom.parentNode.removeChild(dom);
                }

            }
        </script>
        <script type="text/javascript">
            var faceStr = '<img title="[抠鼻]" src="http://bbs.pcauto.com.cn/images/emot/em2001.gif" /><img title="[鼓掌]" src="http://www1.pcauto.com.cn/autobbs/2013/images/emot/em2002.gif" /><img title="[晕]" src="http://bbs.pcauto.com.cn/images/emot/em2005.gif" /><img title="[微笑]" src="http://bbs.pcauto.com.cn/images/emot/em2007.gif" /><img title="[流泪]" src="http://bbs.pcauto.com.cn/images/emot/em2008.gif" /><img title="[闭嘴]" src="http://bbs.pcauto.com.cn/images/emot/em2011.gif" /><img title="[鄙视]" src="http://bbs.pcauto.com.cn/images/emot/em2012.gif" /><img title="[吐]" src="http://bbs.pcauto.com.cn/images/emot/em2016.gif" /><img title="[奋斗]" src="http://bbs.pcauto.com.cn/images/emot/em2040.gif" /><img title="[疑问]" src="http://bbs.pcauto.com.cn/images/emot/em2044.gif" /><img title="[强]" src="http://bbs.pcauto.com.cn/images/emot/em2046.gif" />';
            var facelist = [ [ 'em2001', '[抠鼻]' ], [ 'em2002', '[鼓掌]' ],
                [ 'em2005', '[晕]' ], [ 'em2007', '[微笑]' ],
                [ 'em2008', '[流泪]' ], [ 'em2011', '[闭嘴]' ],
                [ 'em2012', '[鄙视]' ], [ 'em2016', '[吐]' ],
                [ 'em2040', '[奋斗]' ], [ 'em2044', '[疑问]' ], [ 'em2046', '[强]' ] ];
            /*留言*/
            (function() {
                // 移动/切换显示回复框
                function showPopForm(btn) {
                    var wrap = closest(btn, '.m-news-item');
                    if (!wrap)
                        return;
                    var cmt = document.getElementById('comment_pop');
                    if (cmt.parentNode == wrap) {
                        // if already here, just toggle it
                        if (btn.innerHTML == '0' && cmt.style.display == "none") {
                            cmt.style.display = 'block';
                        } else if (btn.innerHTML == '0'
                            && cmt.style.display == "block") {
                            cmt.style.display = 'none';
                        }
                    } else {
                        // 转移评论框           
                        wrap.appendChild(cmt);
                        document.getElementById('content_pop').value = "";
                        cmt.className = "comment";
                        cmt.style.display = 'block';
                    }
                }
                // selector 只能用简单的选择器，#id, tagName, .className，单个无组合
                function closest(ele, selector) {
                    var result, tmp = ele.parentNode;
                    while (tmp) {
                        if (matchSelector(tmp, selector)) {
                            result = tmp;
                            break;
                        }
                        tmp = tmp.parentNode;
                    }
                    return result;
                }
                function matchSelector(ele, selector) {
                    // if use id
                    if (selector.charAt(0) === '#') {
                        return ele.id === selector.slice(1);
                    }
                    // if use class
                    if (selector.charAt(0) === '.') {
                        return (' ' + ele.className + ' ').indexOf(' '
                            + selector.slice(1) + ' ') != -1;
                    }
                    // if use tagName
                    return ele.tagName.toLowerCase() === selector.toLowerCase();
                }
                // ============ 简单的事件委托
                function delegateEvent(interfaceEle, selector, type, fn) {
                    interfaceEle.addEventListener(type, function(e) {
                        if (matchSelector(e.target, selector)) {
                            if (fn) {
                                fn.call(e.target, e);
                            }
                        }
                    });
                }
                // 事件绑定
                var mainEle = document.getElementById('J-main');
                // 切换显示表情
                function toggleFace(faceBtn) {
                    var cmt = closest(faceBtn, '.comment');
                    if (cmt) {
                        cmt.className = cmt.className == 'comment face-open' ? 'comment'
                        : 'comment face-open';
                    }
                }
                // 触发切换显示表情
                var faceBtns = document.querySelectorAll('.comment .c-face-btn');
                for (var i = faceBtns.length - 1; i >= 0; i--) {
                    (function(n) {
                        var item = faceBtns[n];
                        item.addEventListener('click', function(e) {
                            var parentNode = item.parentNode, listObj = parentNode
                            .querySelector(".c-face-list");
                            if (listObj.children.length == 0) {
                                listObj.innerHTML = faceStr;
                            }
                            toggleFace(item, '.comment');
                        });
                    })(i);
                }

                // 点击表情, append title(ubb code)
                var faceList = Array.prototype.slice.call(document
                .querySelectorAll('.comment .c-face-list'));
                faceList.forEach(function(item) {
                    var imgs = item.getElementsByTagName('img');

                    delegateEvent(item, 'img', 'click', function() {
                        // show clicking which face
                        var that = this;
                        that.className = 'hlight';
                        setTimeout(function() {
                            that.className = '';
                        }, 300);

                        var cmt = closest(this, '.comment');
                        if (cmt) {
                            var textArea = cmt.querySelector('textarea');
                            if (textArea) {
                                textArea.value += this.title;
                            }
                        }
                    });
                });

                // 点击回复评论按钮  
                delegateEvent(
                mainEle,
                '.repost',
                'click',
                function(e) {
                    var cmtNum = this.innerHTML;
                    if (cmtNum == 0) {
                        var url = window.location.href, cmtNum = this.innerHTML; 
                        isLogin = ${user != null }  && ${user.getUid() > 0};
                        if (!isLogin) {//未登录
                            location.href = "${UCWAPROOT}/passport/login.jsp?return=" + url;
                        } else {//登录
                            showPopForm(this);
                        }
                    }
                });
            })()
            function tranFaceToBBS(str) {
                for (var i = facelist.length - 1; i >= 0; i--) {
                    p = new RegExp(facelist[i][1].replace('[', '\\[').replace(']',
                    '\\]'), 'gm');
                    str = str.replace(p, '\[' + facelist[i][0] + '\]');
                }
                return str;
            }
            function replyDyna(e) {
			
                var parent = $(e).parents(".m-news-item");
                var dynaInfoId = parent.find("input[name='dynaInfoId']").val();
                var replyId = parent.find("input[name='replyId']").val();
                var content = $("#content_pop").val();
                if(content=="" || content.length==0){
                    showTips("回复内容不能为空");
                    return;
                }
                var type = parent.find("input[name='type']").val();
                if(type==2){
                    var createDate = parent.find("input[name='createDate']").val();
                    postReplyDyna(e,dynaInfoId,replyId,tranFaceToBBS(content),createDate);
                }
            }
            var postStatus = 0;//是否正在提交中
            //回复动态
            function postReplyDyna(e, dynaInfoId, replyId, content, createDate) {
                if (postStatus == 1) {
                    return;
                }
                postStatus = 1;
                $.ajax({
                    url:"${WAPROOT}/dyna/replyDyna.do",
                    data:{
                        dynaInfoId : dynaInfoId,
                        postToDynaReplyId : replyId,
                        content : content,
                        createDate : createDate
                    },
                    dataType:"json",
                    type:"post",
                    success:function(data) {
                    postStatus = 0;
                    if (data.code == 0) {
                        showTips("发表成功");
                        $("#content_pop").val("");
                        addReplyNum(e, 2, data.data.dynaInfoId);
                        $("#comment_pop").hide();
                    } else {
                        showTips(data.message);
                    }
                },
                   error:function(xmlHttpRequest, textStatus, errorThrown){
                    postStatus = 0;
                    var message = "网络错误,请联系管理员";
                    if(xmlHttpRequest.status==503){
                        var json = eval("("+xmlHttpRequest.responseText+")");
                        message = (json.message == ""?"网络错误,请联系管理员":json.message);
                    }
                    showTips(message);
                }
                });
            }
            function addReplyNum(e, type, id) {
                var proCode = $("#provinceIdHide").val();
                var cityCode = $("#cityIdHide").val();
                $(e).parents(".m-news-item").find(".repost").html(1);
                if (type == 2) {
                    $(e).parents(".m-news-item").find(".repost").attr("href","${WAPROOT}/dt/"+id+"/"+proCode+"/"+cityCode+"/");
                }
            }
            /*各种提示*/
            function showTips(msg){
                var tips = document.getElementById('Jtips');
                if(!tips) {
                    tips = document.createElement('div');
                    tips.id = 'Jtips';
                    tips.className = 'm-pop-tips';
                    document.body.appendChild(tips);
                }
                tips.innerHTML = msg;
                tips.style.display = 'block';
                var tips_width = tips.clientWidth/2;
                tips.style.marginLeft = '-'+tips_width+'px';
                tips.style.opacity = 1;    
                setTimeout(function(){
                    tips.style.webkitTransition = 'all 0.3s ease-in';
                    tips.style.opacity = 0;
                    tips.style.marginTop = '-80px';
                    setTimeout(function(){
                        tips.style.display = 'none';
                        tips.style.marginTop = '-40px';
                    }, 300);
                }, 2000);
            }

        </script>
    </body>
</html>